<template>
    <div class="box">
        <div class="header">
            <span class="iconfont iconnew"></span>
            <input type="text" placeholder="搜索内容" class="iconfont" @click="$router.push('/search')">
            <samp class="iconfont iconwode" @click="$router.push('/personal')"></samp>
        </div>
        <!-- 导航栏 -->
        <van-tabs v-model="action">
            <van-tab v-for="item in column" :key="item.id" :title="item.name">

                <!-- :immediate-check:是禁止第一次进入时自动加载 -->
                <van-list
                    v-model="item.loading"
                    :finished="item.finished"
                    finished-text="没有更多了"
                    @load="onLoad"
                    :immediate-check="false"
                    >
                <innarticle :inntxt="post" v-for="post in item.postList" :key="post.id" />
                </van-list>

            </van-tab>
        </van-tabs>
    </div>
</template>

<script>
import innarticle from '../../components/inModule/innarticle'
export default {
    components:{
        innarticle,
    },
    data(){
        return{
            column:{},
            action:localStorage.getItem('token')?1:0,  //默认选择的索引数
            postList:[]
        }
    },
    watch:{
        action(){
            if(this.column[this.action].postList.length == 0){
                console.log('监听到postList没有数据');
                this.FileReq() //监听器监听栏目索引改变时调用请求数据渲染
            }
        }
    },
    computed:{
        getId(){  //获取栏目id
            let id = this.column[this.action].id
            return id
        }
    },
    created(){
        this.Request()
    },
    methods:{
        Request(){   //获取栏目
            if(localStorage.getItem('acrivate')){
                let data = JSON.parse(localStorage.getItem('acrivate')) 
                console.log('获取本地栏目');
                console.log(data);
                this.column = data.map(item=>{
                    return{
                        ...item,
                        postList:[],
                        pageIndex: 1,
                        pageSize: 6,
                        loading: false,
                        finished: false
                    }
                })
            }else{
                this.$axios({
                url:'/category',
                method:'get',
                }).then(res=>{
                    console.log(res);
                    this.column = res.data.data.map(item=>{  //返回的是数组
                        return {
                            ...item,
                            postList:[],
                            pageIndex: 1,
                            pageSize: 6,
                            loading: false,
                            finished: false
                        }
                    })
                    //console.log(this.column.postList);
                })
            }
            this.FileReq()  //获取栏目新闻
        },


        FileReq(){   //根据栏目id获取选中栏目文章
            const arr = this.column[this.action]
            this.$axios({
                url:'/post',
                params:{
                    category:this.getId,
                    pageIndex:this.column[this.action].pageIndex,
                    pageSize:this.column[this.action].pageSize     //分栏目时添加当前页码和每页长度数据
                },
            }).then(res=>{
                console.log(res);
                
                this.column[this.action].postList = [
                    ...this.column[this.action].postList,  //获取到下一页数据加上前面的数据
                    ...res.data.data
                ]
                console.log(res);

                // 每当数据加载完毕将loading设置为true
                this.column[this.action].loading = false

                if(res.data.data.length < this.column[this.action].pageSize){  //如果获取数据的数量小于设定的页面长度,说明到头了将数据完毕标识设为true
                    this.column[this.action].finished = true
                }
            })
        },
        onLoad(){
            console.log('当前页面在底部');
            this.column[this.action].pageIndex += 1
            this.FileReq()
        }
    }
}
</script>

<style lang="less" scoped>
    .box{
        width: 100%;
        width: 100%;
        .header{
            height: 45/360*100vw;
            width: 100%;
            background-color: #ff0000;
            line-height: 45/360*100vw;
            display: flex;
            span{
                display: inline-block;
                width: 15%;
                height: 100%;
                text-align: center;
                font-size: 45/360*100vw;
                color: #ffffff;
            }
            samp{
                display: inline-block;
                width: 15%;
                height: 100%;
                text-align: center;
                font-size: 25/360*100vw;
                color: #ffffff;
                cursor: pointer;
            }
            input{
                display: inline-block;
                outline: none;
                width: 70%;
                height: 70%;
                border: none;
                border-radius: 15px;
                margin-top: 8/360*100vw;
            }
            input[placeholder]{
                text-align: center;
            }
        }
    }
</style>
